/**
 * Created with BlueStream
 * Date: 13. 6. 1
 * Time: 오후 5:41
 * Writer: 강석민
 */
window.onload = function () {

    /** 첫 번째 영역에 추가하기 */
    // 1-1. 기준이 되는 노드 찾기
    var page = document.getElementById("sample_page");
    var firstChild = page.firstChild;

    // 1-2. <p> 태그 엘리먼트를 동적으로 생성
    var p1 = document.createElement("p");

    // 1-3. 텍스트 노드 생성
    var text1 = document.createTextNode("추가내용1");

    // 1-4. p1의 자식 노드로 text1을 추가
    p1.appendChild(text1);
    p1.style.border = "red solid 1px";

    page.insertBefore(p1,firstChild);

    /** 두 번째 영역에 추가하기 */
    // 2-1. 기준이 되는 위치 찾기
    var content = document.getElementById("content");

    // 2-2. <div> 엘리먼트를 동적으로 생성.
    var div1 = document.createElement("div");

    // 2-3. div의 내부 자식 노드를 동적으로 생성하기
    var text2_1 = document.createTextNode("생성할 Node의 양이 많은 경우.");
    var span = document.createElement("span");
    var spanText = document.createTextNode("어떤 방법을");
    span.appendChild(spanText);
    var text2_2 = document.createTextNode("사용해야 할까요?");

    // 2-4. div의 자식 노드로 콘텐츠를 추가
    div1.appendChild(text2_1);
    div1.appendChild(span);
    div1.appendChild(text2_2);
    div1.style.border = "blue solid 2px";

    page.insertBefore(div1,content);

    /** 세 번째 영역에 추가하기 */
    // 3-1. <p> 엘리먼트를 동적으로 생성
    var p2 = document.createElement("p");

    // 3-2. 텍스트 노드 생성
    var text2 = document.createTextNode("추가 내용2");

    // 3-3. p2의 자식 노드로 text2를 추가
    p2.appendChild(text2);
    p2.style.border = "yellow solid 3px";

    // 3-4. p2을 #sample_page 노드 마지막 위치에 추가
    page.appendChild(p2);


}





















